<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 20px' }">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">{{title}}</span>
        <span class="rjfl-more"
        @click="callback"
          >更多
          
        </span>
      </div>
    </template>

    <el-row class="types" :gutter="15">
      <el-col :span="4" class="type" v-for="(it, i) in data" :key="i" @click="gotoDetail(it,router)">
        <img
            :src="it.icon"
            class="image"
          />
          <div style="padding: 12px; display: flex; align-items: center; justify-content: center;">
            <span class="it-name" :title="it.name">{{ it.name }}</span>
          </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref,defineEmits } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());
const emit = defineEmits({
  'callback': null,
})
const callback=()=>{
  emit('callback')
}
defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  title: {
    type: String,
    default: () => '标题'
  }
});

</script>

<style lang="less" scoped>
.types {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  margin: 0;
  .type {
    cursor: pointer;
    margin: 0 0 16px 0px;
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1D2127;
      line-height: 16px;
    }
    &:hover {
      span {
        color: @link-color;
      }
      img {
        opacity: 0.6;
      }
    }
  }
  .image {
    width: 100%;
    height: 180px;
    border-radius: 8px;
    object-fit: cover;
  }
}

@media screen and (max-width: 1366px) {
  .type {
    width: 138px !important;
  }
}
.it-name {
  width: 129px;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
